```jsx
import { useMachine, normalizeProps } from "@zag-js/react"
import * as toast from "@zag-js/toast"
import { useId } from "react"

// 1. Create the toast store
const toaster = toast.createStore({
  overlap: true,
  placement: "top-end",
})

// 2. Design the toast component
function Toast(props) {
  const machineProps = {
    ...props.toast,
    parent: props.parent,
    index: props.index,
  }
  const service = useMachine(toast.machine, machineProps)
  const api = toast.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <h3 {...api.getTitleProps()}>{api.title}</h3>
      <p {...api.getDescriptionProps()}>{api.description}</p>
      <button onClick={api.dismiss}>Close</button>
    </div>
  )
}

// 3. Design the toaster
export function Toaster() {
  const service = useMachine(toast.group.machine, {
    id: useId(),
    store: toaster,
  })
  const api = toast.group.connect(service, normalizeProps)
  return (
    <div {...api.getGroupProps()}>
      {api.getToasts().map((toast, index) => (
        <Toast key={toast.id} toast={toast} parent={service} index={index} />
      ))}
    </div>
  )
}

// 4. Render the toaster in your app
export function App() {
  return (
    <>
      <Toaster />
      <ExampleComponent />
    </>
  )
}

// 5. Within your app
function Demo() {
  return (
    <div>
      <button
        onClick={() => {
          toaster.create({ title: "Hello" })
        }}
      >
        Info toast
      </button>
      <button
        onClick={() => {
          toaster.create({ title: "Data submitted!", type: "success" })
        }}
      >
        Success toast
      </button>
    </div>
  )
}
```
